<template>
    <el-card class="card-with-gradient">
        <el-button size="large" type="success" style="margin-bottom: 20px;"
            @click="addDialogShow = true">添加课程</el-button>
        <el-button type="primary" size="large" style="margin-bottom: 20px" @click="drawer = true">查看课程</el-button>
        <el-drawer v-model="drawer" :with-header="false" size="35%">
            <el-table :data="CourseList">
                <el-table-column prop="cno" label="课程编号" width="80px" />
                <el-table-column prop="cname" label="课程名" width="90px" />
                <el-table-column prop="ctime" label="开始时间" width="120px" />
                <el-table-column prop="cperiod" label="课时" width="70px" />
                <el-table-column prop="cinfo" label="课程介绍" width="140px" />
            </el-table>
        </el-drawer>
        <el-table :data="TeacherCourseList" style="width: 100%;">
            <el-table-column prop="tid" label="课程ID" width="70px" />
            <el-table-column prop="course.cno" label="课程编号" width="80px" />
            <el-table-column prop="course.cname" label="课程名" width="90px" />
            <el-table-column prop="tname" label="老师" width="80px" />
            <el-table-column prop="course.ctime" label="开始时间" width="120px" />
            <el-table-column prop="course.cprogress" label="进度" width="140px">

                <template #default="scope">
                    <el-progress type="dashboard" :percentage="scope.row.course.cprogress">
                        <template #default="{ percentage }">
                            <span class="percentage-value" style="font-size: 20px;">{{ percentage }}%</span>
                        </template>
                    </el-progress>
                </template>
            </el-table-column>
            <el-table-column prop="course.cperiod" label="课时" width="70px" />
            <el-table-column prop="course.cinfo" label="课程介绍" width="140px" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="default" type="primary" @click="selectById(scope.row.course.cid)">修改</el-button>
                    <el-popconfirm title="你确认要删除嘛" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                        @confirm="deleteByCid(scope.row.course.cid)">
                        <template #reference>
                            <el-button size="default" type="danger" @click="console.log(scope.row.cid)">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popover placement="right" :width="400" trigger="hover">
                        <template #reference>
                            <el-button size="default" type="success"
                                @click="DealEmployeeDialogShow(scope.row.tid)">分配学生</el-button>
                        </template>
                        <el-table :data="scope.row.stus">
                            <el-table-column property="sno" label="学生编号" />
                            <el-table-column property="sname" label="学生姓名" />
                            <el-table-column property="college.professional" label="学生专业" />
                        </el-table>
                    </el-popover>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <!-- 添加课程的对话框开始 -->
    <el-dialog v-model="addDialogShow" title="添加课程" width="500">
        <el-form label-width="20%">
            <el-form-item label="课程编号">
                <el-input autocomplete="off" v-model="courseAdd.cno" style="width: 300px" />
            </el-form-item>
            <el-form-item label="课程名">
                <el-input autocomplete="off" v-model="courseAdd.cname" style="width: 300px" />
            </el-form-item>

            <el-form-item label="开始时间">
                <!-- format---在组件中显示的格式-->
                <!-- value-format---绑定的格式 -->
                <el-date-picker type="date" v-model="courseAdd.ctime" placeholder="请选择开课时间" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
            <el-form-item label="进度">
                <el-slider v-model="courseAdd.cprogress" show-input class="slider-demo-block" />
            </el-form-item>
            <el-form-item label="课时">
                <el-input autocomplete="off" v-model="courseAdd.cperiod" style="width: 300px" />
            </el-form-item>
            <el-form-item label="项目介绍">
                <el-input style="width: 300px" v-model="courseAdd.cinfo" :rows="2" type="textarea"
                    placeholder="请在次输入介绍" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button type="primary" @click="insert">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加课程的对话框结束 -->

    <!-- 修改课程的对话框开始 -->
    <el-dialog v-model="updateDialogShow" title="修改项目" width="500">
        <el-form label-width="20%">
            <el-form-item label="课程编号">
                <el-input autocomplete="off" v-model="courseUpdate.cno" disabled style="width: 300px" />
            </el-form-item>
            <el-form-item label="名称">
                <el-input autocomplete="off" v-model="courseUpdate.cname" style="width: 300px" />
            </el-form-item>
            <el-form-item label="开始时间">
                <!-- format---在组件中显示的格式-->
                <!-- value-format---绑定的格式 -->
                <el-date-picker type="date" v-model="courseUpdate.ctime" placeholder="请选择入职时间" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
            <el-form-item label="项目进度">
                <el-slider v-model="courseUpdate.cprogress" show-input class="slider-demo-block" />
            </el-form-item>
            <el-form-item label="课时">
                <el-input autocomplete="off" v-model="courseUpdate.cperiod" disabled style="width: 300px" />
            </el-form-item>
            <el-form-item label="项目介绍">
                <el-input style="width: 300px" v-model="courseUpdate.cinfo" :rows="2" type="textarea"
                    placeholder="请在次输入介绍" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button type="primary" @click="update()">确认</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改课程的对话框结束 -->

    <!-- 分配学生的对话框开始 -->
    <el-dialog v-model="dealDialogShow" title="分配员工">
        <el-transfer v-model="selectedSids" :data="allStudent" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dealDialogShow = false">取消</el-button>
                <el-button @click="insertTidAndSid()">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 分配学生的对话框结束 -->

</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus';
import courseApi from '@/api/courseApi';
import teacherApi from '@/api/teacherApi';
import teacherAndStudentApi from '@/api/teacherAndStudentApi ';
const drawer = ref(false)

//存放所有老师课程信息的数组
const TeacherCourseList = ref([])
//添加对话框是否显示的状态
const addDialogShow = ref(false);
//修改对话框是否显示的状态
const updateDialogShow = ref(false);

//分配对话框是否显示的状态
const dealDialogShow = ref(false);

//所有学生的key label
const allStudent = ref([])
//被选中的学生的eid
const selectedSids = ref([])
//需要分配学生的老师id
const selectedTid = ref(0)
//所有课程
const CourseList = ref([])

//查询所有学生的信息并显示分配学生的对话框
function DealEmployeeDialogShow(tid) {
    teacherAndStudentApi.allStudent(tid)//查询所有在职员工的信息
        .then(resp => {
            //console.log(resp.data);
            allStudent.value = resp.data.allStudent;
            selectedSids.value = resp.data.selectedSids;
            selectedTid.value = tid;
            dealDialogShow.value = true;
        })

}

//分配员工
function insertTidAndSid() {
    teacherAndStudentApi.insertTidAndSid(selectedTid.value, selectedSids.value)
        .then(resp => {
            //console.log(resp);
            //弹出消息
            ElMessage.success(resp.msg);
            //隐藏分配员工对话框
            dealDialogShow.value = false;
            selectTeacherCourseAll()
        })
}

//被添加项目的信息
const courseAdd = ref({
    cno: "",
    cname: "",
    ctime: "",
    cprogress: 0,
    cperiod: "",
    cinfo: "",
});
//定义方法完成课程的添加
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    courseApi.insert(courseAdd.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                //隐藏
                addDialogShow.value = false
                //清空
                courseAdd.value = {
                    cno: "",
                    cname: "",
                    ctime: "",
                    cprogress: 0,
                    cperiod: "",
                    cinfo: "",
                }
                //刷新表格
                selectTeacherCourseAll()
                selectCourseAll()//刷新课程
            } else {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
}
//被修改项目的信息
const courseUpdate = ref({
    cid: "",
    cno: "",
    cname: "",
    ctime: "",
    cprogress: "",
    cperiod: "",
    cinfo: "",
});
//定义方法修改--根据id查询项目并弹出模态框
function selectById(cid) {
    courseApi.selectByCid(cid)
        .then(resp => {
            //console.log(resp);
            courseUpdate.value = resp.data;
            //显示修改模态框
            updateDialogShow.value = true
        })
}
//定义方法实现部门的修改
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    courseApi.update(courseUpdate.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'success',
                    duration: 1200
                });
                //隐藏
                updateDialogShow.value = false
                //刷新表格
                selectTeacherCourseAll()
            } else {
                //弹出消息
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        })
}
//定义方法根据id删除项目
function deleteByCid(cid) {
    courseApi.delete(cid)
        .then(resp => {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                loading.close()
                //弹出消息
                ElMessage.success(resp.msg)
                selectTeacherCourseAll()
            } else {
                //弹出消息
                loading.close()
                ElMessage.error(resp.msg)
                selectTeacherCourseAll()
            }
        });
}

//查询所有课程信息
function selectCourseAll() {
    courseApi.selectAll()
        .then(resp => {
            console.log(resp.data);
            CourseList.value = resp.data;
        })
}
selectCourseAll()

//查询所有老师课程信息
function selectTeacherCourseAll() {
    teacherApi.selectAll()
        .then(resp => {
            //console.log(resp.data);
            TeacherCourseList.value = resp.data;
        })
}
selectTeacherCourseAll()
</script>
<style scoped>
.slider-demo-block {
    max-width: 600px;
    display: flex;
    align-items: center;
}
.slider-demo-block .el-slider {
    margin-top: 0;
    margin-left: 12px;
}
.card-with-gradient {
    background: linear-gradient(to right, rgb(232, 10, 191), rgb(237, 234, 12));
    /* 添加一些基本的样式来美化卡片 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 阴影 */
    color: white;
}
</style>